<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
.bigBox {
  width: 100vw;
  height: 100vh;
  background-image: url(../../assets/login_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 25px; // 50px * 0.5 = 25px
  }
  main {
    width: 100%;
    flex: 1;
    padding: 30px; // 60px * 0.5 = 30px
    // background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    .imgone {
      width: 90px; // 180px * 0.5 = 90px
      height: 80px; // 160px * 0.5 = 80px
      margin-bottom: 50px; // 100px * 0.5 = 50px
      border-radius: 50%;
      background-color: #fff;
    }
    .boxlist {
      width: 275px; // 550px * 0.5 = 275px
      height: 225px; // 450px * 0.5 = 225px
      padding: 10px; // 20px * 0.5 = 10px
      margin-top: 15px; // 30px * 0.5 = 15px
      background-color: #fff;
      border-radius: 4px; // 8px * 0.5 = 4px
      z-index: 1;
    }
    .box-one {
      width: 260px; // 520px * 0.5 = 260px
      height: 200px; // 400px * 0.5 = 200px
      border-bottom-left-radius: 4px; // 8px * 0.5 = 4px
      border-bottom-right-radius: 4px; // 8px * 0.5 = 4px
      background-color: rgba(255, 255, 255, 0.5);
      position: absolute;
      top: 232.5px; // 465px * 0.5 = 232.5px
    }
    .box-two {
      width: 235px; // 470px * 0.5 = 235px
      height: 200px; // 400px * 0.5 = 200px
      border-bottom-left-radius: 4px; // 8px * 0.5 = 4px
      border-bottom-right-radius: 4px; // 8px * 0.5 = 4px
      background-color: rgba(255, 255, 255, 0.5);
      position: absolute;
      top: 238.5px; // 477px * 0.5 = 238.5px
    }
    .main-bot {
      width: 230px; // 460px * 0.5 = 230px
      padding: 10px; // 20px * 0.5 = 10px
      margin-top: 15px; // 30px * 0.5 = 15px
      display: flex;
      justify-content: space-between;
      .pone {
        font-size: 10px; // 20px * 0.5 = 10px
        color: #fff;
      }
      .ptwo {
        font-size: 10px; // 20px * 0.5 = 10px
        color: #fff;
      }
    }
  }
  footer {
    width: 100%;
    height: 80px; // 160px * 0.5 = 80px
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .footer-bot {
      width: 25px; // 50px * 0.5 = 25px
      height: 25px; // 50px * 0.5 = 25px
      background-color: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>

<template>
  <div class="bigBox">
    <header>
      <van-nav-bar style="background-color: #3087ea" />
    </header>
    <main>
      <div class="imgone">
        <img style="width: 100%; height: 100%" src="../../assets/bluehear.png" alt="" />
      </div>
      <div class="boxlist">
        <van-form>
          <van-cell-group inset>
            <van-field
              style="height: 100px"
              v-model="userValues.email"
              name="邮箱"
              label="邮箱"
              placeholder="请输入邮箱"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <br />
            <van-field
              style="height: 100px"
              v-model="userValues.pwd"
              type="password"
              name="密码"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
          <br />
          <div style="margin: 16px">
            <van-button block type="primary" size="small" native-type="submit" @click="onLogin">
              登 录
            </van-button>
          </div>
        </van-form>
      </div>
      <div class="box-one"></div>
      <div class="box-two"></div>
      <div class="main-bot">
        <p class="pone" @click="regit">忘记密码</p>
        <p class="ptwo" @click="zhuce">暂无账号？<span style="font-size: 24px">立即注册</span></p>
      </div>
    </main>
    <footer>
      <div style="margin-bottom: 10px">
        <p style="color: #fff; font-size: 26px">———— 其他登录方式 ————</p>
      </div>
      <div class="footer-bot">
        <van-icon style="color: #3087ea; font-size: 40px" name="wechat" />
      </div>
    </footer>
  </div>
</template>
<script setup lang="ts">
import { useUserStore } from '../../stores/user'
import { ref } from 'vue'
import { request } from '../../axios/request'
import { useRoute, useRouter } from 'vue-router'
import { JSEncrypt } from 'jsencrypt'
import { userStore } from '../../stores/user'
import { showNotify } from 'vant'
import { ElMessage } from 'element-plus'

const user = userStore()
const router = useRouter()
const rou = useRoute()
console.log(rou.query)

const userValues = ref({
  email: '',
  pwd: '',
})
//登录
const onLogin = async () => {
  const crypt = new JSEncrypt()
  const publicKey =
    'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCuQd3gESx7VdIyRYUWjmjg61VIgUK6F45hClmqUMZ7xNiT5rlLM6e78osMvBF/yP7cVm7pK+NMCDWoVS1/AETpxJYqUlIC77ZAU8/MnP96IupnJL87vqhPcpdv7+VqLM38ls++yuD/F/HSoOQTv/leJh+dgE/4EYAJjOWFAbYfXwIDAQAB'
  crypt.setPublicKey(publicKey)
  const newPwd = ref(crypt.encrypt(userValues.value.pwd))
  console.log(newPwd.value)
  await request.post('/health/user/v1/login',{
        email: userValues.value.email,
        pwd: newPwd.value,
      },{
        headers: {
          ...userValues.value,
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      },
    ).then(res => {
      console.log(res)
      let { status, message, result } = res.data
      if (status === '0000') {
        ElMessage({
          message: '登录成功',
          type: 'success',
        })
        router.push('/home')
        user.sex = result.sex === '1' ? '男' : '女'
        const newEmail = userValues.value.email
        const headpic = 'https://img2.baidu.com/it/u=154242341,1761546090&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1735750800&t=9aca0ead7ee28fd95fdf31adea674791'
        localStorage.setItem('result', JSON.stringify(result))
        localStorage.setItem('userName', result.userName)
        localStorage.setItem('token', result.jiGuangPwd)
        localStorage.setItem('userId', JSON.stringify(result.userId))
        localStorage.setItem('sessionId', JSON.stringify(result.sessionId))
        localStorage.setItem('localEmail', newEmail)
        localStorage.setItem('headpic', headpic)
      } else {
        ElMessage({
          message,
          type: 'error',
        })
      }
    })
}

// const onLogin = () => {
//   console.log(userValues.value)

//   UserStore.login({
//     email: userValues.value.email,
//     pwd: userValues.value.pwd,
//   })
//   try {
//     const response = {
//       email: userValues.value.email,
//       password: userValues.value.pwd,
//     }
//     if (response.email == userValues.value.email && response.password == userValues.value.pwd) {
//       console.log('登录成功，欢迎用户')
//       router.push('/my')
//     } else {
//       console.log('邮箱密码错误，登录失败')
//     }
//   } catch (error) {
//     console.log('登录出错，请稍后重试')
//   }
// }
const regit = () => {
  router.push('/passwordone')
}
const zhuce = () => {
  router.push('/zhuce')
}

// const email=ref("3454114244@qq.com")
// const pwd=ref("12345678")
// axios.get('/api/list').then(res=>{
//   console.log(res);
// })
</script>
